﻿@namespace Bit.BlazorUI
@inherits BitComponentBase

<div @ref="RootElement" @attributes="HtmlAttributes"
     id="@_Id"
     style="@StyleBuilder.Value"
     class="@ClassBuilder.Value"
     dir="@Dir?.ToString().ToLower()"
     aria-label="@AriaLabel">
    <button @onclick="HandleOnClick"
            role="button"
            type="button"
            style="@Styles?.Header"
            class="bit-acd-hdr @Classes?.Header"
            aria-expanded="@IsExpanded"
            tabindex="@(IsEnabled ? 0 : -1)">
        @if (HeaderTemplate is not null)
        {
            @HeaderTemplate(IsExpanded)
        }
        else
        {
            <div style="@Styles?.HeaderContent" class="bit-acd-wrp @Classes?.HeaderContent">
                <div style="@Styles?.Title" class="bit-acd-ttl @Classes?.Title">
                    @Title
                </div>
                @if (Description.HasValue())
                {
                    <div style="@Styles?.Description" class="bit-acd-des @Classes?.Description">
                        @Description
                    </div>
                }
            </div>
            <i style="@Styles?.ChevronDownIcon"
               class="bit-icon bit-icon--ChevronRight bit-acd-hic@(IsExpanded ? " bit-acd-hex" : "") @Classes?.ChevronDownIcon" />
        }
    </button>

    <div style="@Styles?.ContentContainer" class="bit-acd-cnt @Classes?.ContentContainer">
        <div role="region"
             style="@Styles?.Content"
             class="bit-acd-con @(IsExpanded ? "bit-acd-cex" : "bit-acd-cco") @Classes?.Content"
             tabindex="@(IsEnabled ? 0 : -1)">
            @(ChildContent ?? Body)
        </div>
    </div>
</div>